<template>
  <van-swipe class="my-swipe"
    :autoplay="3000"
    indicator-color="white"
    >
    <van-swipe-item v-for="(item,index) in BannerData" :key="index" @click="$router.push(`/playlist/${item.encodeId}`)">
      <van-image  width="100%" height="100%" :src="item.pic">
        <template v-slot:loading>
          <van-loading type="spinner"
            size="20" />
        </template>
      </van-image>
    </van-swipe-item>

  </van-swipe>
</template>

<script>
export default {
  data () {
    return {
      BannerData: []
    }
  },
  async created () {
    const { data } = await this.$http.get('/banner', {
      params: {
        type: 1
      }
    })
    console.log(data.banners)
    this.BannerData = data.banners
  }
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  font-size: 0;
  background-color: royalblue;
  }
</style>
